<template>
  <el-wrapper class="login-wrapper">
    <el-header class="login-header">
      <span class="login-icon"></span>
      <span>{{ lang.LOGIN_TITLE }}</span>
    </el-header>
    <el-main class="login-main">
      <div class="cloud" style="top: 10%; animation-delay: 5s"></div>
      <div class="cloud" style="top: 40%; animation-delay: 10s"></div>
      <div class="cloud" style="top: 70%"></div>
      <div class="login-info-wrapper">
        <div class="login-info">
          <el-form ref="ruleFormRef" :model="formValue" :rules="rules">
            <el-row class="login-info-item">
              <el-col :span="6" :offset="6" style="color: #02ce9d; font-size: 20px">用户登录</el-col>
              <el-col :span="6" style="color: #71d2f5; font-size: 20px">User Login</el-col>
            </el-row>
            <el-row class="login-info-item">
              <el-col :span="12" :offset="6">
                <el-form-item prop="userName">
                  <el-input v-model="formValue.userName" :placeholder="`${lang.LOGIN_USERNAME_REQUIED}!`" clearable
                    @keyup.enter.native="login">
                    <template #prefix>
                      <el-icon>
                        <User />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="login-info-item">
              <el-col :span="12" :offset="6">
                <el-form-item prop="password">
                  <el-input v-model="formValue.password" type="password"
                    :placeholder="`${lang.LOGIN_PASSWORD_REQUIED}!`" show-password clearable
                    @keyup.enter.native="login">
                    <template #prefix>
                      <el-icon>
                        <Lock />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="login-info-item">
              <el-col :span="12" :offset="6">
                <el-button type="primary" color="rgb(2, 185, 141)" style="width: 100%" @click="login">{{ lang.LOGIN }}
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-main>
    <el-footer class="login-footer">
      <span>CopyRight © 2022{{ new Date().getFullYear() == 2022 ? '' : (' - ' + new Date().getFullYear()) }}</span>
      <a href="https://www.nti56.com/" target="_blank">nti56.com</a>
      <span>深圳市今天国际软件技术有限公司</span>
    </el-footer>
  </el-wrapper>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useStore } from "../store";
import { useRouter } from "vue-router";
import { lang } from "../lang";
import { Base64 } from 'js-base64'
const store = useStore();
const router = useRouter();
const ruleFormRef = ref();
const props = defineProps([
  "request",
  "success",
  "warning",
  "info",
  "error",
  "loading",
  "closeLoading",
]);

const formValue = reactive({
  userName: "",
  password: "",
});

const rules = reactive({
  userName: [{ required: true, message: `${lang.LOGIN_USERNAME_REQUIED}!`, trigger: "blur" }],
  password: [{ required: true, message: `${lang.LOGIN_PASSWORD_REQUIED}!`, trigger: "blur" }],
});

const { proxy } = getCurrentInstance();

const checkLogin = async () => {
  let response = await props.request("User/CheckLogin", {
    userName: formValue.userName,
    password: Base64.encode(formValue.password)
  });

  if (response.Code === "S") {
    store.updateUser(response.Data.userName, response.Data.token, formValue.userName);
    //设置Token 末尾是过期时间，未传入默认无限期
    proxy.$localStorageUtil.set("access-token", response.Data.token);
    router.replace("/");
  } else {
    props.error(response.Msg);
  }
};

const login = async () => {
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      checkLogin();
    }
  });
};
</script>

<style scoped lang="less">
@width-login: 405px;

.login-container {
  width: 100%;
  height: 100%;
  background-color: rgb(2, 206, 157);
}

.login-header {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #afc5d2;

  .login-icon {
    background-image: url(/image/loginIcon.png);
    width: 14px;
    height: 14px;
  }
}

.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/image/loginbg2.png), url(/image/loginbg1.png);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, cover;

  .login-info-wrapper {
    width: 692px;
    height: 336px;
    background-image: url(/image/logininfo.png);
    z-index: 2;

    .login-info {
      height: 100%;
      width: calc(100% - 230px);
      margin-left: 230px;

      .login-info-item {
        height: 2rem;
        margin-top: 2rem;
        text-align: center;
      }
    }
  }
}

.login-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);

  a {
    cursor: pointer;
    color: rgb(77, 35, 243);
    text-decoration: none;
    font-size: 16px;
  }
}

.animation {
  animation-name: cloudMove;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.cloud {
  position: absolute;
  width: @width-login;
  height: 165px;
  background: url(/image/cloud.png) no-repeat 100% 100%;
  left: -(@width-login);
  z-index: 1;
  .animation
}

@keyframes cloudMove {
  0% {
    left: -(@width-login);
  }

  25% {
    left: calc(0.25 * (100% + @width-login) - @width-login);
  }

  50% {
    left: calc(0.5 * (100% + @width-login) - @width-login);
  }

  75% {
    left: calc(0.75 * (100% + @width-login) - @width-login);
  }

  100% {
    left: 100%;
  }
}
</style>
